<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    width="600px"
    @close="close"
  >
    <el-form ref="formRef" label-width="200px" :model="form" :rules="rules">
      <el-form-item
        v-if="form.OrderID === 0"
        class="form-item"
        label="选择要跟进的商机业务产品"
      >
        <el-cascader
          v-model="form.TrackBusinessProduct"
          :options="productClassOptions"
          :props="productClassSelect"
          placeholder="选择业务产品"
          clearable
          style="width: 300px"
        />
      </el-form-item>
      <el-form-item class="form-item" label="商机跟进状态">
        <el-select
          v-model="form.OrderFlowState"
          style="width: 300px"
          @change="changeOrderFlowState"
        >
          <el-option label="跟进中" :value="0" />
          <!-- <el-option label="暂停跟进" :value="-10" /> -->
          <el-option v-if="form.OrderID > 0" label="已签约" :value="1" />
          <el-option v-if="form.OrderID > 0" label="放弃跟进" :value="-100" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="isGiveupTrack" class="form-item" label="放弃原因">
        <el-input v-model="form.GiveupTrackMemo" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button
        v-if="form.OrderFlowState != OrderFlowState"
        type="primary"
        @click="save"
      >
        确 定
      </el-button>
    </template>
  </el-dialog>
  <ApplySelection ref="ApplySelectionRef" />
</template>

<script>
  import ApplySelection from '@/views/customer/tracking/business/components/ApplySelection'
  import { doEdit } from '@/api/customerTrackingBusiness'
  import { BusinessClassSelect } from '@/api/common'

  export default defineComponent({
    name: 'CustomerTrackingBusinessEdit',
    components: { ApplySelection },
    emits: ['fetch-data', 'label-edit'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        ApplySelectionRef: null,
        formRef: null,
        productClassOptions: [],
        OrderFlowState: 0,
        // productClassSelect: { checkStrictly: true },
        form: {
          roles: [],
          OrderID: 0,
          TrackBusinessProduct: [],
          OrderFlowState: 0,
        },
        rules: {
          title: [{ required: true, trigger: 'blur', message: '请输入标题' }],
        },
        title: '',
        dialogFormVisible: false,
        isGiveupTrack: false,
      })

      const changeOrderFlowState = (state) => {
        if (state === -100) {
          console.log('fadf')
        }
      }
      const showEdit = (row) => {
        state.title = '业务商机'
        state.form = Object.assign({}, row)
        state.OrderFlowState = row.OrderFlowState
        state.dialogFormVisible = true
      }
      const close = () => {
        state['formRef'].resetFields()
        state.form = {
          roles: [],
        }
        state.dialogFormVisible = false
      }
      const save = async () => {
        console.log('state.form', state.form)
        state['formRef'].validate(async (valid) => {
          if (valid) {
            const { msg, data } = await doEdit(state.form)
            if (data.Created === -1) {
              open(data.OrderID, data.SaleStaff)
            } else {
              $baseMessage(msg, 'success', 'vab-hey-message-success')
              if (state.form.OrderFlowState === 1) {
                await emit('label-edit', 'signed')
              } else if (state.form.OrderFlowState === -100) {
                await emit('label-edit', 'giveup')
              } else {
                await emit('label-edit', 'tracking')
              }
              await emit('fetch-data')
            }
            close()
          }
        })
      }
      const fetchData = async () => {
        state.listLoading = true
        const {
          data: { BusinessClassOptions },
        } = await BusinessClassSelect()
        state.productClassOptions = BusinessClassOptions
        state.listLoading = false
      }

      const open = (OrderID, SaleStaff) => {
        if (SaleStaff) {
          ElMessageBox.confirm(
            '本商机已被他人正在跟进占用，你要申请此商机？',
            '提示',
            {
              confirmButtonText: '申请',
              cancelButtonText: '放弃',
              type: 'warning',
            }
          )
            .then(() => {
              console.log(state.form, 'state.form11')
              const dataMsg = {
                OrderID: OrderID,
              }
              state.ApplySelectionRef.showEdit(dataMsg)
            })
            .catch(() => {
              // ElMessage({
              //   type: 'info',
              //   message: 'Delete canceled',
              // })
            })
        } else {
          alert('本商机已在您库中，无需新建，也无需申请')
        }
      }
      onMounted(() => {
        fetchData()
      })

      return {
        ...toRefs(state),
        showEdit,
        open,
        close,
        save,
        changeOrderFlowState,
      }
    },
  })
</script>
